<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker @change="dateChange" v-model="pickerDate" style="width:240px" value-format="yyyy.MM.dd" type="daterange"
                        align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select style="width:300px" filterable placeholder="选择门店" v-model="formInline.store_id">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select style="width:160px" placeholder="选择卡类型" v-model="formInline.type" @change="typeChange">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select style="width:160px" placeholder="选择业务类型" v-model="y_type" @change="yTypeChange">
                        <el-option v-for="item in types" :key="item.name" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input style="width:130px" v-model="formInline.card_no" placeholder="请输入卡号"
                        @keyup.enter.native="searchClick"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input style="width:130px" v-model="formInline.mobile" placeholder="请输入手机号"
                        @keyup.enter.native="searchClick"></el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <transition name="fade" mode="out-in">
                <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small" @sort-change='tableSortChange'
                    :key="formInline.type">
                    <el-table-column align="center" label='卡号' prop="card_no"></el-table-column>
                    <el-table-column align="center" label='姓名' prop="user_name"></el-table-column>
                    <el-table-column align="center" label='手机号' prop="mobile"></el-table-column>
                    <el-table-column v-if="formInline.type==1" align="center" label='会员等级' prop="card_id">
                    </el-table-column>
                    <el-table-column align="center" label='卡类型' prop="type_id" :sortable='isSort'></el-table-column>
                    <el-table-column align="center" label='充值时间' prop="date_create" :sortable='isSort'></el-table-column>
                    <el-table-column align="center" label='充值金额' prop="money" :sortable='isSort'></el-table-column>
                    <el-table-column v-if="formInline.type==1" align="center" label='获得币数'>
                        <template slot-scope="scope">
                            {{scope.row.coins == 'undefined'?'--':scope.row.coins}}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="formInline.type==1||formInline.type==5" align="center" label='获得积分'
                        prop="get_scores">
                    </el-table-column>
                    <el-table-column v-if="formInline.type==4||formInline.type==5" align="center" label="获得星数"
                        prop="stars">
                    </el-table-column>
                    <el-table-column v-if="formInline.type!=1&&formInline.type!=4||formInline.type==5" align="center"
                        label="获得次数">
                        <template slot-scope="scope">
                            {{scope.row.times*1>=0?scope.row.times:'-' }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label='业务类型' prop="type"></el-table-column>
                    <el-table-column align="center" label='是否退餐'>
                        <template slot-scope="scope">
                            {{scope.row.refund_id != undefined && scope.row.refund_id > 0 ?'已退餐':'--'}}
                        </template>
                    </el-table-column>
                </el-table>
            </transition>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-size="20" layout="prev, pager, next, jumper"
                :total="totalDataNumber">
            </el-pagination>
             <el-button disabled class="pull-right" type="primary" size="small" @click="exportClick()" :loading="exportLoading">导出表单<count-down ref="cd"/></el-button>
             <div class="pull-right total">
                 <span>笔数合计：{{allnum}}</span>
                 <span>金额合计：{{allMoney}}</span>
             </div>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        getPage,
        getStoreList,
        edit,
        getTypeList,
        getExport
    } from "@/api/member/member_recharge";
    import { pickerOptionsF, pickerDateF, optionMaxTime,sortBy } from '@/utils';
    export default {
        data() {
            return {
                exportLoading: false,
                typeList: [{ id: -1, name: '全部' },{ id: 1, name: '会员卡充值办卡' }, { id: 2, name: '10/20次卡办卡' }, { id: 3, name: '月/季/年卡办卡' }, { id: 4, name: '星星卡充值办卡' }, { id: 5, name: '补卡换卡' }, { id: 6, name: '6/12次卡办卡' }, { id: 7, name: 'E舞成名办卡' }],
                types:[],
                list: null,
                listLoading: false,
                isSort: true,
                currentPage: 1,
                totalDataNumber: 1,
                brandList: [],
                storeList: null,
                allnum: "0",
                allMoney: "0.00",
                y_type: {},
                formInline: {
                    type: -1,
                    y_type:"",
                    begin_time: "",
                    end_time: "",
                    mobile: "",
                    card_no: "",
                    store_id: "",
                    type_id: "",
                    date_create: "",
                    money: "",
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            // 导出
            exportClick() {
                getExport(this.formInline)
                this.exportLoading = true;
                this.$refs.cd.countDownF(30).then(() => {
                    this.exportLoading = false;
                });
            },
            typeChange() {
                this.getType(); 
                // this.searchClick()
            },
            yTypeChange(){
                this.searchClick();
            },
            dateChange(val){
                this.isSort=val[0]==val[1];
                if(!this.isSort){
                    if(this.typeList[0].id==-1){
                        this.typeList.splice(0,1);
                        this.formInline.type=this.typeList[0].id;
                    }
                }else{
                    if(this.typeList[0].id!=-1){
                        this.typeList.unshift({ id: -1, name: '全部' });
                        this.formInline.type=-1;
                    }                    
                }
            },
            // 门店列表
            getStore() {
                getStoreList({ category_id: 249 }).then(response => {
                    this.storeList = response;
                    let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else { 
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    }
                    this.getType(); 
                });
            },
            //卡类型
            getType(){
                getTypeList({type:this.formInline.type}).then(res=>{
                    if(res.code==1){
                        if(res.data.length>0){
                            res.data.unshift({name:"全部"})
                        }
                        this.types=res.data;
                        this.y_type=res.data[0].name;
                        this.fetchData();
                    }
                })
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.formInline.y_type="";
                    if(this.y_type!="全部"){
                        this.formInline.y_type=this.types.find(val=>val.name==this.y_type);
                    }
                    this.fetchData();
                });
            },
            //排序
            tableSortChange(column){
                this.formInline.type_id="";
                this.formInline.date_create="";
                this.formInline.money="";
                if(column.prop=='type_id'){
                    if(this.formInline.y_type==""&&this.formInline.type==-1){
                        if(column.order=="descending"){
                            this.list.sort(sortBy('type_id',1))
                        }else{
                            this.list.sort(sortBy('type_id',0))
                        }
                        return ;
                    }else{
                        this.formInline.type_id=column.order=="descending"?"desc":column.order=="ascending"?"asc":"";
                    }                    
                }else if(column.prop=='date_create'){
                    if(this.formInline.y_type==""&&this.formInline.type==-1){
                        if(column.order=="descending"){
                            this.list.sort(sortBy('time',1))
                        }else{
                            this.list.sort(sortBy('time',0))
                        }
                        return ;
                    }else{
                        this.formInline.date_create=column.order=="descending"?"desc":column.order=="ascending"?"asc":"";
                    }
                }else if(column.prop=='money'){
                    if(this.formInline.y_type==""&&this.formInline.type==-1){
                        if(column.order=="descending"){
                            this.list.sort(sortBy('nMoney',1))
                        }else{
                            this.list.sort(sortBy('nMoney',0))
                        }
                        return ;
                    }else{
                        this.formInline.money=column.order=="descending"?"desc":column.order=="ascending"?"asc":"";
                    }
                }
                this.fetchData();
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                this.currentPage = 1;
                if(this.isSort&&this.formInline.y_type==""&&this.formInline.type==-1){
                    this.totalDataNumber = 1;
                    getList(this.formInline).then(res => {
                        this.allnum=res.length;
                        let total=0;
                        res.forEach(val=>{
                            if(typeof val.money === 'number' && !isNaN(val.money)){
                                total+=val.money*1;
                                val.nMoney=val.money*1
                            }else{
                                val.nMoney=10000000;
                            }
                        })
                        this.allMoney=total.toFixed(2);
                        this.list = res;
                        this.listLoading = false;
                    })                    
                }else{
                    getPage(this.formInline).then(response => {
                        this.totalDataNumber = response.page * 20;
                        this.allnum=response.count;
                        this.allMoney=(response.money*1).toFixed(2);
                        getList(this.formInline).then(response => {
                            this.list = response
                            this.listLoading = false;
                        })
                    }).catch(res=>{
                        this.listLoading=false;
                    })
                }
            },
            // 分页
            handleCurrentChange(val) {
                this.listLoading = true;
                getList(this.formInline, val).then(response => {
                    this.list = response
                    this.listLoading = false;
                })
            },
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .bottom_box{
        .total{
            margin-top: 8px;
            span{
                margin-right: 20px;
            }
        }
    }
</style>